<template>
  <div>
    <div class="topSearchOne">
      <div class="topSearchOneLeft">
        <div>
          <p>店铺状态:</p>
          <el-select
            v-model="storeStatus"
            :style="{ width: '160px', marginLeft: '20px' }"
            clearable
            filterable
            placeholder="店铺状态"
            @clear="ClearCategory"
          >
            <el-option
              v-for="(item, i) in goodsStatusList"
              :key="i"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <p>名称:</p>
          <el-input
            v-model="mallName"
            :style="{ width: '160px', marginLeft: '20px' }"
            placeholder="名称"
          ></el-input>
        </div>
      </div>
      <div class="topSearchOneRight">
        <el-button
          type="primary"
          :style="{ marginLeft: '20px' }"
          @click="handleSearch"
        >
          查询
        </el-button>
        <el-button :style="{ marginLeft: '20px' }" @click="chongzhi">
          重置
        </el-button>
      </div>
    </div>
    <!-- 店铺审核 -->
    <div class="goodsselloutbox">
      <!-- <div class="SecondRow">
        <div>
          <el-button
            :style="{ marginLeft: '20px' }"
            round
            size="mini"
            @click="Refresh"
            >刷新
          </el-button>
        </div>
      </div> -->
      <div class="SecondRow">
        <div class="SecondRowLeft"></div>
        <div class="SecondRowRight">
          <el-button circle icon="el-icon-refresh-right" @click="Refresh">
          </el-button>
        </div>
      </div>
      <div class="DataTableDiv">
        <div></div>
        <el-table
          v-loading="loading"
          :cell-style="{ 'text-align': 'center' }"
          :data="goodsList"
          :header-cell-style="{ 'text-align': 'center' }"
          border
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" min-width="60"></el-table-column> -->
          <el-table-column fixed label="排序" prop="sort" min-width="60">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  <!-- 序号 -->
                  {{ scope.$index + 1 }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="店铺" prop="mallName" min-width="320">
            <template slot-scope="scope">
              <div class="flex-container">
                <img :src="scope.row.image" alt="店铺头像" />
                <span class="flex-item">
                  <p>{{ scope.row.mallName }}</p>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="店主名称" prop="shopkeeper" min-width="130">
          </el-table-column>
          <el-table-column label="商品分类" prop="categoryName" min-width="130">
          </el-table-column>
          <el-table-column label="店铺状态" prop="status" min-width="130">
            <template slot-scope="scope">
              {{ getStatusText(scope.row.status) }}
            </template>
          </el-table-column>
          <el-table-column label="店铺类型" prop="type" min-width="130">
            <template slot-scope="scope">
              <div class="flex-container">
                <span class="flex-item">
                  <p>{{ getTypeText(scope.row.type) }}</p>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createAt" min-width="210">
          </el-table-column>
          <el-table-column label="操作" min-width="267">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                @click="handleClick(scope.row)"
                >查看
              </el-button>
              <el-button
                v-if="scope.row.status === 1"
                size="small"
                type="text"
                @click="ReviewDelist(scope.row)"
                >审核</el-button
              >

              <!-- <el-button
                size="small"
                v-if="scope.row.ptStatus === 1 || scope.row.ptStatus === 2"
                type="text"
                @click="ReviewDelist(scope.row)"
                >{{ scope.row.ptStatus === 1 ? "审核" : "下架" }}</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <div class="paging">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div> -->
      <div class="paging" v-if="total > 0">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 添加/修改商品组件 -->
    <StoreInfo
      v-if="centerDialogVisible"
      :centerDialogVisible="centerDialogVisible"
      :currentRow="currentRow"
      :enterType="enterType"
      :cancelSubmit="cancelSubmit"
      @cancelgoodesmodel="cancelgoodesmodel"
    />
  </div>
</template>
<script>
import StoreInfo from "@/views/mall/managementend/memberList/components/Storeinfo.vue";
import {
  SubmitForReview,
  QueryMallNameList,
  QueryStoreList,
  QueryStoreInfo,
  StoreReviewHandel,
} from "@/api/mallApi/managementend/mallset";

export default {
  name: "StoreReview",
  components: {
    StoreInfo,
  },
  data() {
    return {
      storeStatus: "", //店铺状态搜索
      mallCode: "", //店铺名称搜索
      // 添加/修改 商品弹窗
      centerDialogVisible: false,
      currentRow: {}, // 保存当前行数据
      enterType: 0, // 默认值为1，表示从编辑按钮进入
      cancelSubmit: 0, //商品审核不能确定修改
      searchShop: "",
      goodsList: [],
      selectedRows: [], // 表格 多选内容
      isButtonDisabled: false, // checkbox 联动按钮
      currentPage: 1, // 分页
      total: 0,
      pageSize: 10,
      loading: false,
      mallName: "",
      ptStatus: "",
      // 商品属性列表 1：待审核2：审核通过3：驳回 4：违规下架
      goodsStatusList: [
        { name: "待审核", value: 1 },
        { name: "审核通过", value: 2 },
        { name: "驳回", value: 4 },
        { name: "违规下架", value: 3 },
      ],
    };
  },
  methods: {
    chongzhi() {
      this.storeStatus = "";
      this.mallName = "";
      this.Refresh();
    },
    ReviewDelist(e) {
      // console.log(e);
      this.$prompt("若是驳回请填写驳回理由！", "审核", {
        confirmButtonText: "驳回",
        cancelButtonText: "同意",
        inputPattern: /^\S.*\S$/,
        inputErrorMessage: "请输入驳回理由",
        cancelButtonClass: "TongYiClass",
        confirmButtonClass: "BoHuiClass",
        distinguishCancelAndClose: true,
      })
        .then(({ value }) => {
          const params = {
            id: e.id,
            status: 4, //店铺状态：1 待审核 2已审核 3 违规下架 4 驳回
            rejectReason: value,
          };
          // console.log("驳回", params);
          StoreReviewHandel(params).then((res) => {
            if (res.code === "00000") {
              this.Refresh();
              this.$message({
                message: "该店铺已被驳回！",
                type: "success",
              });
            }
          });
        })
        .catch((type) => {
          if (type === "cancel") {
            const params = {
              id: e.id,
              status: 2, //店铺状态：1 待审核 2已审核 3 违规下架 4 驳回
              rejectReason: "",
            };
            StoreReviewHandel(params).then((res) => {
              if (res.code === "00000") {
                this.Refresh();
                this.$message({
                  message: "该店铺审核已通过！",
                  type: "success",
                });
              }
            });
          }
        });
    },
    Refresh() {
      this.getGoodsList();
    },
    getTypeText(type) {
      switch (type) {
        case 1:
          return "个人";
        case 2:
          return "公司";
        default:
          return "未知";
      }
    },
    getStatusText(Status) {
      switch (Status) {
        case 1:
          return "待审核";
        case 2:
          return "审核通过";
        case 3:
          return "违规下架";
        case 4:
          return "驳回";
        default:
          return "未知";
      }
    },
    ClearAttributes() {}, // 清空 商品属性
    ClearCategory() {
      this.Refresh();
    }, // 清空 商品分类
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoodsList();
    },
    handleCurrentChange(val) {
      // 分页
      this.currentPage = val;
      this.getGoodsList();
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      // TODO 在这里进行相应的操作，如发起请求等
    }, // 表格多选
    async handleClick(row) {
      try {
        const param = {
          mallCode: row.mallCode,
          // mallCode: "un0m55sksm",
        };
        // 调用 GoodsDetail 函数，并等待其完成
        this.loading = true;
        const res = await QueryStoreInfo(param);
        // console.log("店铺详情信息", res);
        this.loading = false;
        this.currentRow = res.data;
        this.enterType = 2;
        this.centerDialogVisible = true; // 打开弹窗
      } catch (error) {
        this.loading = false;
        console.error("处理错误", error);
      }
    },
    cancelgoodesmodel(data) {
      // 弹窗关闭时触发，可以在这里重置数据或进行其他操作
      this.currentRow = {};
      this.centerDialogVisible = data;
      this.enterType = 0;
    },
    // 获取商品列表
    getGoodsList() {
      this.loading = true;
      const params = {
        searchBeginTime: "", //开始时间
        searchEndTime: "", //结束时间
        pageSize: this.pageSize, //分页：每页大小（默认10）
        pageNo: this.currentPage, //分页：第几页（从1开始）
        orderBy: "", //排序字段
        sortBy: "asc", //正序或者倒序排列（asc 或 desc）
        mallCode: "", //店铺编码
        mallName: this.mallName, //店铺名称
        shopkeeper: "", //店主名称
        gender: "", //1:男2：女3：未知
        billingPeriod: "", //结算周期
        type: "", //1:个人 2企业
        status: this.storeStatus, //店铺状态：1 待审核 2已审核 3 违规下架 4 驳回
      };

      //   获取店铺列表
      QueryStoreList(params)
        .then((res) => {
          // console.log("查询店铺列表", res);
          if (res.code !== "00000") return;
          this.goodsList = res.data.rows;
          this.total = parseInt(res.data.totalRows);
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    // 获取商品分类列表
    // 搜索
    handleSearch() {
      this.currentPage = 1;
      this.getGoodsList();
    },
  },
  created() {},
  mounted() {
    this.Refresh();
  },
  computed: {
    fifterdShop() {
      return this.goodsList.filter((item) => {
        return item.name.toLowerCase().includes(this.searchShop.toLowerCase);
      });
    },
  },
  watch: {
    selectedRows: {
      handler(newValue) {
        // 数组发生变化时，isButtonDisabled计算属性会重新计算，从而更新按钮的禁用状态
        this.isButtonDisabled = newValue.length === 0;
      },
      deep: true,
      immediate: true, // 立即执行处理函数
    },
  },
};
</script>

<style lang="scss">
.topSearchOne {
  width: 98%;
  margin: 1%;
  background-color: #fff;
  min-height: 75px;
  display: flex;
  justify-content: space-between;
  .topSearchOneLeft {
    width: 1050px;
    display: flex;
    margin-top: 10px;
    margin-left: 10px;
    > div {
      display: flex;
      align-items: center;
      p {
        font-size: 14px;
      }
      margin-left: 10px;
    }
  }
  .topSearchOneRight {
    width: 200px;
    display: flex;
    align-items: center;
  }
}
.TongYiClass {
  background-color: #409eff;
  color: #fff;
  border: none;
  margin-right: 20px;
  &:hover {
    background-color: #439bf6;
    color: #fff;
  }
}

.BoHuiClass {
  background-color: #f56c6c !important ;
  color: #fff;
  border: none;
  &:hover {
    background-color: #ef7e7e;
    color: #fff;
  }
}
</style>
<style lang="scss" scoped>
.goodsselloutbox {
  width: 98%;
  min-height: 750px;
  margin-top: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  background-color: #fff;
  overflow: hidden;

  .SecondRow {
    width: 100%;
    min-height: 65px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .SecondRowLeft {
      margin-top: 10px;
      margin-left: 25px;
    }
    .SecondRowRight {
      margin-top: 10px;
      margin-right: 40px;
    }
  }

  .DataTableDiv {
    width: 98%;
    margin-left: 1%;
    margin-bottom: 15px;
    border: 1px solid #dcdee2;

    // > div:nth-child(1) {
    //   padding: 10px;
    // }

    //表格
    .flex-container {
      display: flex;
      align-items: center; /* 垂直居中 */
      justify-content: space-around;

      > img {
        width: 60px;
        height: 60px;
      }

      .flex-item {
        width: 150px;
        height: 40px;
        -webkit-line-clamp: 2; /* 显示两行文本 */
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .TableAttrTem {
      display: flex;
      align-items: center;
      // justify-content: space-around;
      margin: 0 25px;
    }
  }

  .paging {
    width: 99%;
    height: 50px;
    margin-bottom: 20px;
    // background-color: antiquewhite;
    display: flex;
    align-items: end;
    justify-content: end;
  }
}
</style>
